<script setup lang="ts">
import { ref } from 'vue'
import { TimeLabel, TimeConst } from '@/widgets'

const time = ref(0)

function resetTime() {
  if (time.value == TimeConst.NONE) {
    time.value = 0
  }
}

function incSec() {
  resetTime()
  time.value += 1
}

function decSec() {
  resetTime()
  time.value -= 1
}

function incMin() {
  resetTime()
  time.value += 60
}

function decMin() {
  resetTime()
  time.value -= 60
}

function incHour() {
  resetTime()
  time.value += 3600
}

function decHour() {
  resetTime()
  time.value -= 3600
}

function incDay() {
  resetTime()
  time.value += 3600 * 24
}

function decDay() {
  resetTime()
  time.value -= 3600 * 24
}

function noneTime() {
  time.value = TimeConst.NONE
}
</script>
<template>
  <div class="label-example pane-block">
    <div class="label-example-block">
      <strong>Txt box</strong>
      <div class="txt-box">normal</div>
      <div class="txt-box is-primary">primary</div>
      <div class="txt-box is-info">info</div>
      <div class="txt-box is-success">success</div>
      <div class="txt-box is-link">link</div>
      <div class="txt-box is-warning">warning</div>
      <div class="txt-box is-dark">dark</div>
      <div class="txt-box is-text">text</div>
    </div>
    <div class="label-example-block">
      <strong>Time label ({{ time }})</strong>
      <time-label :value="time" />
      <time-label class="is-primary" :value="time" />
      <time-label class="is-info" :value="time" />
      <time-label class="is-success" :value="time" />
      <time-label class="is-link" :value="time" />
      <time-label class="is-warning" :value="time" />
      <time-label class="is-dark" :value="time" />
      <time-label class="is-text" :value="time" />
      <div class="buttons">
        <button class="button" @click="incSec">+1s</button>
        <button class="button" @click="decSec">-1s</button>
      </div>
      <div class="buttons">
        <button class="button" @click="incMin">+1m</button>
        <button class="button" @click="decMin">-1m</button>
      </div>
      <div class="buttons">
        <button class="button" @click="incHour">+1h</button>
        <button class="button" @click="decHour">-1h</button>
      </div>
      <div class="buttons">
        <button class="button" @click="incDay">+1d</button>
        <button class="button" @click="decDay">-1d</button>
      </div>
      <button class="button" @click="noneTime">none time</button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/widgets/var';
.label-example {
  border-top: 1px solid $border;
  display: flex;
  flex-direction: row;

  .label-example-block {
    padding: 0.5em 0.75em;
    width: 10em;
    &:not(:last-child) {
      border-right: 1px solid $border;
    }
    display: flex;
    flex-direction: column;
    strong:first-child {
      padding: 0.5em 0em;
    }
  }
}
</style>
